<html>
<head>
  <title>PURE Unobtrusive Rendering Engine</title>
  <script src="../libs/jquery.js"></script>
  <script src="../libs/pure.js"></script>
</head>
<body>
  <!-- HTML template -->
  <ul>
    <li></li>
  </ul>

  <script>
    var data = {
      animals:[
        {name:'mouse'},
        {name:'cat'},
        {name:'bird'},
        {name:'dog'}
      ]
    };

    //declaration of the actions PURE has to do
    var directive = {
      'li':{
        'animal<-animals':{
          '.':'animal.name'
        }
      }
    };

    // note the use of render instead of autoRender
    $('ul').render(data, directive);
</script>
</body>
</html>